<template>
    <div>
        <div class="btn">
            <button type="button" @click="AddShopItem">模拟新增商品列表</button>
            <button type="button" @click="editShopitem">修改父组件的商品价格</button>
        </div>

        <!-- 通过props的shops把父组件的shopList传到子组件中 -->
        <!-- v-slot="{ a }  使用了 具名插槽来传递 数据 -->
        <ShopCar :shops="shopList" ref="ShopCarRef" v-slot="{ a }">
            <ShopItem2 :item="a"></ShopItem2>
        </ShopCar>

    </div>
</template>

<script setup lang='ts'>
import { ref, useTemplateRef } from 'vue';
import ShopCar from './components/ShopCar.vue';
import { type IShopInfo } from '@/types/shop'
import ShopItem2 from './components/ShopItem2.vue';


const ShopCarRef = useTemplateRef('ShopCarRef')

const shopList = ref<IShopInfo[]>([
    {
        id: '1',
        shopName: 'Prodect 1',
        count: 1,
        price: 100,
        stock: 10,
        shopImgUrl: '/src/assets/images/5.jpg'
    },
    {
        id: '2',
        shopName: 'Prodect 2',
        count: 2,
        price: 50,
        stock: 5,
        shopImgUrl: '/src/assets/images/6.png'
    },
    {
        id: '3',
        shopName: 'Prodect 3',
        count: 1,
        price: 200,
        stock: 7,
        shopImgUrl: '/src/assets/images/7.png'
    },
])

const AddShopItem = () => {
    ShopCarRef.value?.getAddShop({
        id: '4',
        shopName: 'Prodect 4',
        count: 2,
        price: 200,
        stock: 7,
        shopImgUrl: '/src/assets/images/8.jpg'
    })
}
const editShopitem = () => {
    ShopCarRef.value?.getEditShop(0, 'price', 120)
}

</script>

<style lang="scss" scoped>
.btn {
    margin: 10px;
}
</style>
